import { DownOutlined, SearchOutlined } from "@ant-design/icons";
import { Button, Input, Modal } from "antd";
import Service from "./Service";
import style from "./style.module.css";
import {SearchInput} from "./styled"
import AreaBlock from "./components/AreaBlock/AreaBlock";
import { ssoLogin } from "@/utils/login/ssoLogin";
import { ssoLoginType } from "@/utils/login/model";

export default class Header extends Service{
    areaSelect=async ()=>{
        this.setState({
            isVisible:true
        })
    }
    confirmArea=async()=>{
        localStorage.setItem("currentArea",`${JSON.stringify(this.state.currentArea)}`)  
        this.setPostAreaCity()  
        this.setState({
            isVisible:false
        })
        window.location.reload()
    }

    cancelArea=async()=>{
        this.setState({
            isVisible:false
        })
    }

    
    render = () => {
        let {areaCityList,currentArea}=this.state;
        return (
            <div className={style.Header}>
                <div onClick={this.areaSelect} className={style.area_select}>
                    <span>{currentArea?.value}</span>
                    <DownOutlined style={{
                        marginLeft:"0.48vw",
                        marginTop:"0.3vw",
                        fontSize:"3vw"
                    }}/>
                </div>
                <div className={style.search}>
                    <SearchInput
                    
                    prefix={<SearchOutlined
                        style={{
                            color:"#95c2fc",
                        }}/>}
                        placeholder="搜索" 
                        />
                </div>
                <a onClick={(e)=>{
                    e.preventDefault();
            
                    ssoLogin(ssoLoginType.legal);
                    
                }} className={style.user_avatar}>
                    <img src={require("../../assect/image/user_avatar.png")} />
                </a>
                <div className={style.modal_box}>
                    <Modal 
                    width={"100vw"}
                    okText="确定"
                    cancelText="取消"
                    bodyStyle={{
                        width: "100%",
                        paddingLeft: "10px",
                        paddingRight:"10px"
                    }}
                    onOk={this.confirmArea}
                    onCancel={this.cancelArea}
                    closable={false}
                    title="--请选择范围--" visible={this.state.isVisible} >
                    <div className={style.modal_content}>
                        {
                            
                            areaCityList.map((item,index)=>{
                                return(
                                       <div key={index}  onClick={()=>{
                                       this.setState({
                                            currentArea:this.state.areaCityList[index]
                                       })
                                       }} >
                                         <AreaBlock  currentArea={this.state.currentArea} item={item} />
                                       </div>
                                )
                            })
                        }              
                    </div>
                    </Modal>
                </div>
            </div>
        )
    }
}